<script setup lang="ts">
import { ElConfigProvider } from 'element-plus';
import { useAppStore } from '@/store/modules/app';
import VScaleScreen from 'v-scale-screen'
const appStore = useAppStore();
onMounted(() => {
  // triggerScale();
  // window.addEventListener("resize", function () {
  //   triggerScale();
  // });
});
function triggerScale() {
  const targetX = ref(1920)
  const targetY = ref(1080)

  // 获取html的宽度和高度（不包含滚动条）
  const currentX = ref()
     currentX.value =  document.documentElement.clientWidth || document.body.clientWidth;
  // https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth
  const currentY = ref()
     currentY.value = document.documentElement.clientHeight || document.body.clientHeight;

  // 1.缩放比例  3840 / 2160 => 2
  const ratio = ref()
  ratio.value = currentX.value / targetX.value;

  const bodyEl = ref()
  bodyEl.value = document.querySelector("body");
  // 2.需要修改缩放的原点 body { transform-origin: left top; }
  bodyEl.value.setAttribute("style", `transform:scale(${ratio.value})`);
}
function triggerScale2() {
  const targetX = ref(1920);
  const targetY = ref(1080);
  const targetRatio = ref(16 / 9);
  const currentX = ref()
  currentX.value = document.documentElement.clientWidth || document.body.clientWidth;
  const currentY = ref()
     currentY.value = document.documentElement.clientHeight || document.body.clientHeight;

  // 1.缩放比例  3840 / 2160 => 2
  const ratio = ref()
  ratio.value = currentX.value / targetX.value;
  const currentRatio = ref()
  currentRatio.value = currentX.value / currentY.value;
  const transformStr = ref("");
  if (currentRatio.value > targetRatio.value) {
    ratio.value = currentY.value / targetY.value;
    transformStr.value = `transform:scale(${ratio.value}) translateX(-${
        targetX.value / 2
    }px); left:50%;`;
  } else {
    transformStr.value = `transform:scale(${ratio.value})`;
  }
  var bodyEl = ref()
  bodyEl.value = document.querySelector("body");
  // 2.需要修改缩放的原点 body { transform-origin: left top; }
  bodyEl.value.setAttribute("style", transformStr.value);
}
</script>

<template>
<!--  <v-scale-screen width="1920" height="1080">-->
   <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view />
  </el-config-provider>
<!--  </v-scale-screen>-->
</template>
